<template>
  <div class="detail-container">
    <div class="detail-list">
      <!-- head return-->
      <div class="detail-head">
        <van-nav-bar title="订单详情">
          <template #left>
            <van-icon name="arrow-left" size="24" color="black" @click="eseOrderDetail" />
          </template>
        </van-nav-bar>
      </div>

      <div class="detail-content">
        <div class="add-info" v-if="nowOrderDetail.invoice.delivery_charge > 0">
          <div class="add-info-box">
            <div class="add-box">
              <div class="add-text">
                <span>配送地址:</span>
                <span>{{ ToAddress.address1 + ToAddress.address2 }}</span>
              </div>
              <div class="user-text">
                <span>{{ ToAddress.name + ' ' + ToAddress.salute + ' ' }} {{ ToAddress.phone_number }}</span>
              </div>
            </div>
            <div class="shops-tel">
              <van-icon name="phone-o" />
              <span>联系商家</span>
            </div>
          </div>
        </div>

        <div class="order-info">
          <div class="order-info-box">
            <div class="state-box">
              <div class="order-state">
                <span>订单状态:</span>
                <van-icon name="checked" v-if="nowOrderDetail.status === 'paid'" />
                <van-icon name="clear" v-if="nowOrderDetail.status === 'voided'" />
                <span>{{ nowOrderDetail.status === 'voided' ? 'voided' : '订单完成' }}</span>
              </div>
              <div class="order-date">
                <span>完成时间:</span>
                <span>{{ nowOrderDetail.status === 'paid' ? nowOrderDetail.invoice.datetime_close : '' }}</span>
              </div>
              <div class="submit-date">
                <span>下单时间:</span>
                <span>{{ nowOrderDetail.created_at }}</span>
              </div>
              <div class="serial-number">
                <span>订单编号:</span>
                <span>{{ nowOrderDetail.status === 'paid' ? nowOrderDetail.invoice.ref_id : '' }}</span>
              </div>
            </div>
            <div class="take-number" v-if="nowOrderDetail.invoice.delivery_charge === 0">
              <span>取餐号</span>
              <span>{{ nowOrderDetail.invoice.call_num }}</span>
            </div>
          </div>
        </div>

        <div class="goods-info">
          <div class="logo-box">
            <div class="logo-img">
              <img :src="shopsDetail.img" alt="logo" />
            </div>
            <div>{{ shopsDetail.name }}</div>
          </div>
          <div class="goods-lists" v-for="item in nowOrderDetail.invoice.invoice_line" :key="item.id">
            <van-card
              :num="item.quantity"
              :price="item.subtotal + '.00'"
              :desc="item.subtotal !== item.subtotal_before_discount ? '￥' + item.subtotal_before_discount + '.00' : ''"
              :title="item.item.name"
              :thumb="item.item.image_thumbnail_cdn === null || item.item.image_thumbnail_cdn === undefined ? localIMG : item.item.image_thumbnail_cdn"
            />
          </div>
          <div class="discount-box" v-if="true">
            <span>优惠券</span>
            <span>￥0</span>
          </div>
          <div class="discount-box" v-if="this.discountSum > 0">
            <span>折扣</span>
            <span>￥{{ discountSum }}</span>
          </div>
          <div class="charge-box">
            <span>小计</span>
            <span>￥{{ subtotal }}</span>
          </div>
          <div class="charge-box">
            <span>税</span>
            <span>￥{{ nowOrderDetail.invoice.tax }}</span>
          </div>
          <div class="charge-box" v-if="nowOrderDetail.invoice.delivery_charge > 0">
            <span>配送费</span>
            <span>￥{{ nowOrderDetail.invoice.delivery_charge }}</span>
          </div>
          <div class="charge-box" v-if="nowOrderDetail.invoice.service_charge > 0">
            <span>服务费</span>
            <span>￥{{ nowOrderDetail.invoice.service_charge }}</span>
          </div>
          <div class="balance-box" v-if="nowOrderDetail.minus_credit > 0">
            <span>使用余额</span>
            <span>￥{{ nowOrderDetail.minus_credit }}</span>
          </div>
        </div>

        <div class="paySum-info">
          <div class="sum-text">
            <span>实际付款</span>
            <span>￥{{ nowOrderDetail.grand_total }}</span>
          </div>
        </div>

        <div class="methods-info">
          <div class="take-type">
            <span>取餐方式</span>
            <span>{{ takeFood }}</span>
          </div>
          <div class="pay-type">
            <span>支付方式</span>
            <span>{{ paymentType }}</span>
          </div>
        </div>

        <div class="remark-info">
          <div class="remark-text">
            <span>偏好及口味的备注</span>
            <span>无</span>
          </div>
        </div>

        <div class="bottom-box"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nowOrderDetail: {},
      localIMG: './../static/img/mxbc/Ice_Cream/Ferris_Crispy.jpeg',
      deliveryAddress: '',
      ToAddress: {},
      takeFood: '',
      paymentType: '',
      // 折扣金额
      discountSum: 0,
      // 不含税不含配送费、服务费小计
      subtotal: 0,
      shopsDetail: {},
      orderQuery: {}
    }
  },
  created() {
    this.orderQuery = this.$route.query
    // 初始化当前商店信息
    var shopInfo = JSON.parse(sessionStorage.getItem('saveNowShop'))
    this.shopsDetail = shopInfo
    // 初始化当前订单详情
    this.nowOrderDetail = this.$store.state.nowOrderDetail

    this.ToAddress = this.nowOrderDetail.invoice.to_address
    // 计算折扣总额、小计
    var discount = this.nowOrderDetail.invoice.invoice_line
    discount.forEach(item => {
      if (item.subtotal_before_discount !== item.subtotal) {
        this.discountSum += item.subtotal_before_discount - item.subtotal
      }
      this.subtotal += item.subtotal
    })
    // 支付方式
    if (this.nowOrderDetail.invoice.payment_source_last4 !== undefined) {
      this.paymentType = this.nowOrderDetail.invoice.payment_source_method + '****' + this.nowOrderDetail.invoice.payment_source_last4
    } else {
      this.paymentType = '****'
    }
    // 取餐方式
    if (this.nowOrderDetail.invoice.delivery_charge > 0) {
      this.takeFood = '外卖'
    } else if (this.nowOrderDetail.invoice.service_charge > 0) {
      this.takeFood = '自提'
    } else {
      this.takeFood = '堂食'
    }
  },
  methods: {
    // 关闭当前订单详情页
    eseOrderDetail() {
      this.$router.push({ path: '/home/order', query: { dateIndex: this.orderQuery.dateIndex, activeName: this.orderQuery.activeName } })
      // this.$router.go(-1)
    }
  }
}
</script>

<style lang="less" scoped>
.detail-container {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
}
.detail-list {
  width: 100%;
  height: 100%;
  background-color: #ededed;
  overflow-y: auto;
  .detail-head {
    position: fixed;
    width: 100%;
    z-index: 1;
  }
  .detail-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 100%;
    background-color: #ededed;
    .add-info,
    .order-info,
    .goods-info,
    .paySum-info,
    .methods-info,
    .remark-info {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      top: 46px;
      width: 98%;
      border-radius: 9px;
      background-color: white;
      margin-bottom: 0.4em;
    }
    .add-info {
      display: flex;
      justify-content: center;
      height: 78px;
      .add-info-box {
        display: flex;
        align-items: center;
        width: 95%;
        .add-box {
          display: flex;
          flex-direction: column;
          width: 85%;
          height: 90%;
          .add-text {
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 100%;
            height: 65%;
            span:nth-child(1) {
              font-size: 0.8em;
              color: #969696;
            }
            span:nth-child(2) {
              overflow: hidden;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              font-size: 0.85em;
              color: #545454;
              width: 96%;
              height: 30%;
              margin-top: 0.3em;
            }
          }
          .user-text {
            display: flex;
            align-items: center;
            width: 100%;
            height: 35%;
            span:nth-child(1) {
              font-size: 0.8em;
              color: #545454;
              margin-right: 0.6em;
            }
          }
        }
        .shops-tel {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 15%;
          /deep/.van-icon-phone-o {
            font-size: 1.8em;
            color: #545454;
          }
          span:nth-child(2) {
            font-size: 0.8em;
            color: #8a8a8a;
          }
        }
      }
    }
    .order-info {
      display: flex;
      justify-content: center;
      height: 100px;
      .order-info-box {
        display: flex;
        align-items: center;
        width: 95%;
        .state-box {
          width: 85%;
          height: 90%;
          .order-state {
            display: flex;
            align-items: center;
            height: 30%;
            margin-bottom: 0.3em;
            /deep/.van-icon-checked,
            .van-icon-clear {
              color: orange;
              font-size: 1.2em;
              margin-left: 0.3em;
              margin-right: 0.3em;
            }
            .van-icon-clear {
              color: red;
            }
            span {
              font-size: 0.8em;
              color: #a8a8a8;
            }
          }
          .order-date,
          .submit-date,
          .serial-number {
            display: flex;
            align-items: center;
            height: 22%;
            font-size: 0.8em;
            span:nth-child(1) {
              color: #a8a8a8;
              margin-right: 0.6em;
            }
            span:nth-child(2) {
              color: #3b3b3b;
            }
          }
        }
        .take-number {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 15%;
          span:nth-child(1) {
            color: #a8a8a8;
            font-size: 0.8em;
          }
          span:nth-child(2) {
            color: orange;
            font-size: 1.5em;
            margin-top: 0.3em;
          }
        }
      }
    }
    .goods-info {
      display: flex;
      flex-direction: column;
      padding-bottom: 0.5em;
      .logo-box {
        display: flex;
        align-items: center;
        width: 95%;
        height: 45px;
        .logo-img {
          overflow: hidden;
          width: 30px;
          height: 30px;
          border-radius: 6px;
          margin-right: 0.9em;
        }
        img:nth-child(1) {
          width: 100%;
          height: 100%;
        }
      }
      .goods-lists {
        width: 95%;
        height: 69px;
        border-bottom: 0.06em solid #ebebeb;
        margin-bottom: 0.5em;
        /deep/.van-card {
          width: 100%;
          height: 100%;
          background-color: white;
          padding-left: 0;
          padding-right: 0;
        }
        /deep/.van-card__header {
          width: 100%;
          height: 100%;
        }
        /deep/.van-card__content {
          height: 100%;
          min-height: 100%;
        }
        /deep/.van-card__thumb {
          width: 54px;
          height: 54px;
        }
        /deep/.van-card__num {
          position: absolute;
          left: 0;
          bottom: 0;
          font-size: 1.2em;
        }
        /deep/.van-card__price {
          position: absolute;
          right: 0;
          bottom: 0;
          color: red;
          font-size: 1.1em;
        }
        /deep/.van-card__price-integer,
        .van-card__price-currency {
          font-size: 1.2em;
        }
        /deep/.van-card__price-decimal,
        .van-card__title {
          font-size: 1.1em;
        }
        /deep/.van-card__desc {
          position: absolute;
          right: 0;
          bottom: 2em;
          color: #a8a8a8;
          text-decoration: line-through;
        }
      }
      .charge-box,
      .discount-box,
      .balance-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 95%;
        height: 27px;
        span:nth-child(1) {
          color: #545454;
        }
        span:nth-child(2) {
          color: #a8a8a8;
        }
      }
      .balance-box {
        span:nth-child(1) {
          color: red;
        }
        span:nth-child(2) {
          color: red;
          font-weight: 600;
        }
      }
      .discount-box {
        span:nth-child(2) {
          color: red;
        }
      }
    }
    .paySum-info,
    .remark-info {
      height: 40px;
      .sum-text,
      .remark-text {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 95%;
        span:nth-child(1) {
          color: #545454;
        }
        span:nth-child(2) {
          color: #a8a8a8;
        }
      }
      .sum-text span:nth-child(2) {
        color: #545454;
      }
    }
    .methods-info {
      display: flex;
      flex-direction: column;
      height: 70px;
      .take-type,
      .pay-type {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 95%;
        height: 40%;
        span {
          color: #545454;
        }
      }
    }
    .bottom-box {
      position: relative;
      top: 40px;
      width: 100%;
      height: 80px;
      background-color: #ededed;
    }
  }
}
</style>
